<template>
  <view class="process-node" ref="tip">
		<!-- 时间轴 -->
		<view class="process-drop">
			<up-icon :name="setIcon(task.icon)" size="16"></up-icon>
		</view>
		<view v-show="task.name == 'END'" class="process-line" :style="{height: height+'px', top: `-${height-1}px`}"></view>
		<!-- 审批节点 -->
    <view class="process-left">
      <view class="title">
        <text v-if="task.enableEdit" style="color: red"> * </text>
        {{ task.title }}
      </view>
      <view class="desc" v-if="task.users">{{task.desc}}</view>
    </view>
		<!-- 右侧用户 -->
    <view class="process-right">
      <!-- 如果有更多用户，显示“更多”按钮 -->
      <view class="more-users" v-if="hasMoreUsers" @click="showAllUsers">
        <view class="more-avatar">
          <up-icon name="account" size="21"></up-icon>
        </view>
        <text class="more-name">更多</text>
      </view>

      <!-- 显示最多三个用户 -->
      <view class="user-container" v-for="(user, i) in visibleUsers" :key="'user_' + i" @click="viewUserInfo(user)">
        <view class="user">
          <view class="avatar">
            <image v-if="user.avatar" :src="user.avatar"></image>
            <text v-else>{{ user.name }}</text>
            <up-icon
                @click="delUser(i)"
                v-if="user.enableEdit && !user?.selected"
                class="close"
                name="close-circle-fill"
                size="16"
            ></up-icon>
          </view>
          <text class="name">{{ user.name }}</text>
        </view>

        <!-- 显示 "+" 按钮 -->
        <view v-if="i < visibleUsers.length - 1" class="plus-button" :key="'plus_' + i" @click="$emit('insertUser', i)">
          <up-icon name="plus" size="20"></up-icon>
        </view>
      </view>

      <!-- 添加用户的按钮 -->
      <view class="add-user" v-if="task.enableEdit && (task.multiple || task.users.length === 0)" @click="$emit('addUser', task)">
        <up-icon name="plus" size="24"></up-icon>
      </view>
    </view>
  </view>

  <up-popup mode="bottom" v-model:show="showPopup" :customStyle="{padding: '0', backgroundColor: '#fff', borderRadius: '24rpx 24rpx 0 0'}" >
    <view style="height: 70vh; display: flex; flex-direction: column;overflow: hidden;">
      <!-- 标题栏 -->
      <view class="popup-header">
        <text class="header-title">{{ currentTitle }}</text>
        <view class="header-close" @click="closePopup">
          <up-icon name="close" color="#999" size="20"></up-icon>
        </view>
      </view>

      <!-- 用户数量统计 -->
      <view class="user-count">
        共 {{ task.users?.length || 0 }} 人
      </view>

      <!-- 用户列表 -->
      <scroll-view class="popup-content" scroll-y="true">
        <view class="user-list">
          <view class="user-item" v-for="(user, i) in task.users" :key="'user_'+i" @click="viewUserInfo(user)">
            <view class="user-avatar">
              <image v-if="user.avatar" :src="user.avatar" mode="aspectFill"></image>
              <text v-else class="avatar-text">{{ user.name.charAt(0) }}</text>
            </view>
            <text class="user-name">{{ user.name }}</text>
            <view class="user-action" v-if="user.enableEdit && !user?.selected">
              <up-icon name="close" color="#999" size="18" @click="delUser(i)"></up-icon>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </up-popup>
</template>

<script>
export default {
  name: "ProcessNodeRender",
  props:{
    desc:{
      type: String,
      required: '',
    },
    task:{
      type: Object,
      required: true,
      default: () => {
        return {}
      }
    },
    error:{
      type: Boolean,
      default: false
    }
  },
  // components: { Avatar },
  computed: {
    // 计算可见用户（最多三个）
    visibleUsers() {
      return this?.task?.users?.slice(0, 2);
    },
    // 是否有更多用户
    hasMoreUsers() {
      return this?.task?.users?.length > 2;
    },
    // 剩余用户的数量
    remainingUsersCount() {
      return this?.task?.users?.length - 3;
    },
    hiddenUsers() {
      return this?.task?.users;
    },
    currentTitle() {
      return this.task?.title || '所有用户';
    },
  },
  data() {
    return {
			height: 0,
      showPopup: false,
		}
  },
	mounted() {
		this.$nextTick(() => {
			uni.createSelectorQuery().selectAll(".process-drop").boundingClientRect(res => {
				if(res && res.length > 0) {
					this.height = +res[res.length-1].top - +res[0].top;
				}
			}).exec(() => {});
		})
	},
  methods: {
    // 关闭弹窗
    closePopup() {
      this.showPopup = false;
    },
    // 展示所有用户的逻辑
    showAllUsers() {
      this.showPopup = true;
      // 可以在这里弹出一个模态框或抽屉，展示所有用户
    },
		setIcon(icon) {
			const str = icon.split('-');
			switch(str[str.length-1]) {
				// 发起人
				case 'solid':
					return 'account-fill';
				// 抄送人
				case 'promotion':
					return 'tags-fill';
				// 审批人
				case 'check':
					return 'edit-pen-fill';
				// 完结
				case 'success':
					return 'checkmark-circle-fill';
			}
		},
    delUser(i) {
      const user = this.task.users[i];
      this.task.users.splice(i, 1); // 删除当前用户
      this.$emit('delUser', this.task.id, i, user); // 传递 nodeId、索引、用户对象
    },
    errorShark(){
      this.$refs.tip.classList.add('shake-tip')
      setTimeout(() => this.$refs.tip.classList.remove('shake-tip'), 1200)
    },
    viewUserInfo(value){
      console.log('value',value);
      uni.navigateTo({
        url: '/pages/addressBook/details/grdetails',
        animationType: 'none',
        success: function (res) {
          res.eventChannel.emit('details', {
            item: {
              id: value.id,
              worker_name: value.name
            }
          })
        }
      });
    }
  }
}
</script>

<style lang="less" scoped>
.popup-header {
  position: relative;
  padding: 32rpx;
  text-align: center;
  border-bottom: 1rpx solid #f5f5f5;

  .header-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }

  .header-close {
    position: absolute;
    right: 24rpx;
    top: 50%;
    transform: translateY(-50%);
    padding: 16rpx;
  }
}

.user-count {
  padding: 24rpx 32rpx;
  font-size: 26rpx;
  color: #999;
  background-color: #fafafa;
}

.popup-content {
  overflow-y: auto;
  height: 70vh;
  flex: 1;
  //padding: 0 32rpx;
}

.user-list {
  padding: 0 32rpx;
  padding-bottom: 32rpx;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #3c9cff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 24rpx;

  image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .avatar-text {
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
  }
}

.user-name {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.user-action {
  width: 60rpx;
  text-align: right;
  padding: 8rpx;
}



.process-right {
  display: flex;
  align-items: center;

  .user {
    margin-right: 16rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .more-users {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 16rpx;
    cursor: pointer;
    margin-bottom: 15rpx;

    .more-avatar {
      width: 62rpx;
      height: 62rpx;
      background-color: #f3f3f3;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      .more-text {
        color: #666;
        font-size: 24rpx;
        font-weight: 500;
      }
    }

    .more-name {
      font-size: 24rpx;
      color: #666;
      margin-top: 8rpx;
    }

    &:active {
      opacity: 0.8;
    }color: #333; // 字体颜色
    }
  }



.process-node {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
}
.process-drop {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44rpx;
	height: 44rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	border-radius: 50%;
	background-color: #F3F3F3;
}
.process-line {
	position: absolute;
	left: 20rpx;
	width: 2px;
	background-color: #aaa;
}
.process-left {
	margin-left: 58rpx;
	font-size: 28rpx;
	.desc {
		color: #B6ADB3;
	}
}
.process-right {
	display: flex;
}
.user {
	margin-right: 16rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.name {
	font-size: 28rpx;
}
.avatar {
	position: relative;
	background: #377fff;
	border-radius: 50%;
	width: 62rpx;
	height: 62rpx;
	text-align: center;
	line-height: 62rpx;
	.close {
		position: absolute;
		right: -10rpx;
		top: -10rpx;
	}
	image {
		width: 62rpx;
		height: 62rpx;
		border-radius: 50%;
	}
	text {
		color: #ffffff;
		font-size: 12px;
	}
}
.add-user {
	border-radius: 50%;
	width: 68rpx;
	height: 68rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px dotted #aaa;
  position: relative;
  top: -16rpx;
}


.user-container {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  position: relative;
  .user {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 10rpx;
    margin-left: 10rpx;

    .avatar {
      position: relative;
      width: 62rpx;
      height: 62rpx;
      background-color: #377fff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }

      text {
        color: #ffffff;
        font-size: 24rpx;
        font-weight: bold;
      }

      .close {
        position: absolute;
        right: -10rpx;
        top: -10rpx;
      }
    }

    .name {
      margin-top: 8rpx;
      font-size: 24rpx;
      color: #333;
    }
  }

  .plus-button {
    position: relative;
    top: -13rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    background-color: #f3f3f3;
    margin-left: 8rpx;
    cursor: pointer;

    &:active {
      opacity: 0.8;
    }
  }
}

</style>
